<template>
  <q-card flat v-if="articleVo && !props.loading">
    <q-card-section>
      <q-item
        class="rounded-borders"
        :to="{
          path: '/personal/' + articleVo.userInfo.id + '/create',
        }"
      >
        <q-item-section top avatar>
          <q-avatar size="50px">
            <q-img
              :src="articleVo.userInfo.avatar"
              :ratio="1 / 1"
              errorSrc="/images/default-avatar.png"
            />
          </q-avatar>
        </q-item-section>
        <q-item-section>
          <q-item-label> {{ articleVo.userInfo.username }}</q-item-label>
          <q-item-label caption lines="2">
            {{ articleVo.userInfo.summary }}
          </q-item-label>
        </q-item-section>
      </q-item>
    </q-card-section>
    <q-separator />
    <q-card-section class="text-sm row justify-around">
      <q-btn
        flat
        :to="{
          path: '/personal/' + articleVo.userInfo.id + '/follow',
        }"
      >
        <div>
          <div>{{ articleVo.userInfo.favUserNum }}</div>
          <div>关注</div>
        </div>
      </q-btn>
      <q-btn
        flat
        :to="{
          path: '/personal/' + articleVo.userInfo.id + '/fans',
        }"
      >
        <div>
          <div>{{ articleVo.userInfo.fansNum }}</div>
          <div>粉丝</div>
        </div>
      </q-btn>
    </q-card-section>
    <q-card-section
      class="row justify-around"
      v-if="articleVo?.userInfo.id != webStore.userInfo.id"
    >
      <q-btn
        class="w-80px"
        :color="articleVo.userInfo.followFlag ? 'info' : 'positive'"
        :label="articleVo.userInfo.followFlag ? '取关' : '关注'"
        @click="
          () => {
            followUser(articleVo?.userInfo.id);
          }
        "
      />
      <q-btn
        class="w-80px"
        @click="
          () => {
            if (articleVo) {
              webStore.openChatDig(articleVo.userInfo.id);
            }
          }
        "
        color="primary"
        label="私信"
      />
    </q-card-section>
  </q-card>
  <q-card flat v-else>
    <q-card-section>
      <q-item class="rounded-borders">
        <q-item-section top avatar>
          <q-skeleton type="QAvatar" />
        </q-item-section>
        <q-item-section>
          <q-item-label> <q-skeleton type="text" /></q-item-label>
          <q-item-label caption lines="2">
            <q-skeleton type="text" />
          </q-item-label>
        </q-item-section>
      </q-item>
    </q-card-section>
    <q-separator />
    <q-card-section class="text-sm row justify-around">
      <q-skeleton type="QBtn" />
      <q-skeleton type="QBtn" />
    </q-card-section>
    <q-card-section class="row justify-around">
      <q-skeleton type="QBtn" />
      <q-skeleton type="QBtn" />
    </q-card-section>
  </q-card>
</template>

<script setup lang="ts">
import { globalFollowUser } from 'src/service/api';
import { articleVo } from './shared';
import { useYuan } from 'src/use';
import { useWebStore } from 'src/stores/webStore';

const props = defineProps<{
  loading: boolean;
}>();
const webStore = useWebStore();
const { Ok } = useYuan();
const followUser = async (userId = '-1') => {
  const { data, error } = await globalFollowUser({ userId });
  if (error) return;
  if (data) {
    Ok('关注成功');
    if (articleVo.value) {
      articleVo.value.userInfo.followFlag = true;
      articleVo.value.userInfo.fansNum++;
    }
  } else {
    Ok('取关成功');
    if (articleVo.value) {
      articleVo.value.userInfo.followFlag = false;
      articleVo.value.userInfo.fansNum--;
    }
  }
};
</script>

<style scoped></style>
